<template>
	<view>
		<view class="top-nav">
			<image src="../../static/icon/tjbj.png" mode=""></image>
			<view class="top-title">
				<view class="circle">
					<view class="inside"></view>
				</view>
				<text class="title-text">数据概览</text>
				<text v-if="personType == 3" class="label">当前单位:</text>
				<text v-if="personType == 3" class="switch-icon" @click="handleTap('picker')">{{label}}</text>
				<text v-if="personType == 3" @click="handleTap('picker')" class="jt"></text>
				<lb-picker ref="picker"  mode="selector" :list="unitList" :dataset="{ name: 'label' }" @change="handleChange"
				 @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker>
			</view>
			<view class="top-content">
				<view class="content-item">
					<view v-if="ticketCount['工单数量']" style="color: #F2FF63;" class="item-num">{{ticketCount['工单数量']}}</view>
					<view v-else style="color: #F2FF63;" class="item-num">0</view>
					<view class="item-text">工单总量</view>
				</view>
				<view class="content-item">
					<view v-if="ticketCount['已完成']" style="color: #10EA15;" class="item-num">{{ticketCount['已完成']}}</view>
					<view v-else style="color: #10EA15;" class="item-num">0</view>
					<view class="item-text">已完成</view>
				</view>
				<view class="content-item">
					<view v-if="ticketCount['处理中']" style="color: #FCC25E;" class="item-num">{{ticketCount['处理中']}}</view>
					<view v-else style="color: #FCC25E;" class="item-num">0</view>
					<view class="item-text">处理中</view>
				</view>
				<view class="content-item">
					<view v-if="ticketCount['待处理']" style="color: #FF9138;" class="item-num">{{ticketCount['待处理']}}</view>
					<view v-else style="color: #FF9138;" class="item-num">0</view>
					<view class="item-text">待处理</view>
				</view>
				<view class="content-item">
					<view v-if="ticketCount['已废弃']" style="color: #494949;" class="item-num">{{ticketCount['已废弃']}}</view>
					<view v-else style="color: #494949;" class="item-num">0</view>
					<view class="item-text">已废弃</view>
				</view>
				<view class="content-item">
					<!-- <view class="item-num">12</view>
					<view>已废弃</view> -->
				</view>
			</view>
		</view>
		<view v-show="show">
			<!-- 柱状图 -->
			<view class="nav">
				<view style="margin-right: 304rpx;">单位：单</view>
				<view class="week-btn" @click="setIndex(0)" :class="currentIndex == 0 ? 'active' : ''">最近七天</view>
				<view class="year-btn" @click="setIndex(1)" :class="currentIndex == 1 ? 'active' : ''">今年</view>
				<!-- <view class="type-btn-line" @click="switchToLine" :class="type == 'line' ? 'type-active':''">
					<image v-if="type == 'line'" src="../../static/icon/zhexian.png" mode=""></image>
					<image v-if="type == 'column'" src="../../static/icon/zhexian1.png" mode=""></image>
				</view>
				<view class="type-btn-column" @click="switchToColumn" :class="type == 'column' ? 'type-active':''">
					<image v-if="type == 'column'" src="../../static/icon/zhuzhuang.png" mode=""></image>
					<image v-if="type == 'line'" src="../../static/icon/zhuzhuang1.png" mode=""></image>
				</view> -->
			</view>
			<column ref="column"></column>
			<!-- 圆环 -->
			<!-- <ring ref="ring"></ring> -->
			<!-- 表格 -->
			<view class="table-title">
				成员工单详情
			</view>
			<wyb-table ref="table" :headers="headers" :contents="contents" :sort-ways="sortWays" />
		</view>
		<view v-show="!show">
			<van-empty description="暂无统计" />
		</view>
	</view>
</template>

<script>
	import { mapState, mapGetters } from 'vuex'
	import LbPicker from '@/components/lb-picker'
	import Ring from '@/components/my-components/ring'
	import Column from '@/components/my-components/column'
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import dayjs from 'dayjs'
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaRing = null;
	export default {
		components: {
			Ring,
			Column,
			wybTable,
			LbPicker
		},
		data() {
			return {
				currentUnitId: uni.getStorageSync('unitId')[0],
				unitList: [],
				label: uni.getStorageSync('userInfo')['所属单位名称'][0],
				show: false,
				currentIndex: 1,
				type: 'column',
				params: {
					单位id: null
				},
				params1: {
					单位id: null
				},
				params2: {
					开始时间: '',
					结束时间: '',
					统计项: '单位',
					单位id: null,
					时间跨度: 2
				},
				headers: [{
				    label: '姓名',
				    key: '人员名称'
				}, {
				    label: '总工单数',
				    key: '总数'
				}, {
				    label: '本月工单数',
				    key: '本月工单数'
				}, {
				    label: '本月已完成',
				    key: '本月已完成'
				}, {
				    label: '本月待完成',
				    key: '本月待完成'
				}, {
				    label: '平均评分',
				    key: '平均评分'
				}],
				sortWays: ['inv', 'none', 'asc'],
				contents: [],
				ticketCount: {},
				sortCol: [{
					key: '总数'
				},{
					key: '本月工单数'
				},{
					key: '本月已完成'
				},{
					key: '本月待完成'
				},{
					key: '平均评分'
				},],
				typeCount: {},
				serverData: '',
				ringData: {}
			}
		},
		onShow() {
			if(uni.getStorageSync('login')) {
				this.unitList = uni.getStorageSync('unitList').slice(1)
				this.initStatic()
			}
		},
		// onLoad() {
		// 	if(uni.getStorageSync('login')) {
		// 		this.initStatic()
		// 	}
		// },
		computed: {
			...mapGetters(['personType'])
			isLogin() {
				return uni.getStorageSync('login')
			}
		},
		methods: {
			initStatic() {
				this.getTicketStatistic()
				this.getTicketCount()
				this.getPersonTicketDetail()
				this.getTypeCount()
			},
			switchToLine() {
				this.type = 'line'
				this.$refs.column.changeType('line')
			},
			switchToColumn() {
				this.type = 'column'
				this.$refs.column.changeType('column')
			},
			setIndex(index) {
				this.currentIndex = index
				if(index === 0) {
					this.getStatistic(0)
				}else {
					this.getTicketStatistic()
				}
			},
			// 获取数据概览
			getTicketCount() {
				this.params1.单位id = this.currentUnitId
				this.$http.post('ticketSystem/statistic/orgticket', this.params1).then(res => {
					if(res.code === 10000){
						console.log(res)
						this.ticketCount = res.data
					}
				})
			},
			// 获取成员工单详情
			getPersonTicketDetail() {
				uni.showLoading({
					mask: true
				})
				this.$http.post('ticketSystem/statistic/workercount',{单位id: this.currentUnitId}).then(res => {
					if(res.code === 10000){
						this.contents = res.data.list
					}
				})
			},
			// 获取最近七天
			getStatistic() {
				this.params2.开始时间  = dayjs(this.getSevenDayBefore()).format('YYYY-MM-DDTHH:mm:ssZ')
				this.params2.结束时间 = dayjs(Date.now()).format('YYYY-MM-DDTHH:mm:ssZ')
				this.params2.单位id = this.currentUnitId
				this.params2.时间跨度 = 1
				this.loadStatistic('date')
			},
			// 获取工单数量趋势
			getTicketStatistic() {
				this.params2.开始时间  = dayjs(this.getFirstDayOfYear()).format('YYYY-MM-DDTHH:mm:ssZ')
				this.params2.结束时间 = dayjs(Date.now()).format('YYYY-MM-DDTHH:mm:ssZ')
				this.params2.单位id = this.currentUnitId
				this.params2.时间跨度 = 2
				this.loadStatistic('year')
			},
			loadStatistic(time) {
				this.$http.post('ticketSystem/statistic/tendencycount', this.params2).then(res => {
					console.log(res, '柱状图')
					if(res.code === 10000){
						this.$refs.column.getServerData(res.data.list, time)
					}
				})
			},
			// 获取类型占比
			getTypeCount() {
				this.params.单位id = this.currentUnitId
				this.$http.post('ticketSystem/statistic/tickettype',this.params).then(res => {
					console.log(res, '类型占比')
					if(res.code === 10000){
						// this.$refs.ring.getServerData(res.data)
						this.show = true
					}
				})
			},
			// 获取本年的第一天
			getFirstDayOfYear() {
				let date = new Date()
				date.setMonth(0)
				date.setDate(1)
				date.setHours(0)
				date.setMinutes(0)
				date.setSeconds(0)
				return date
			},
			// 获取七天前的零点零分零秒
			getSevenDayBefore() {
				let date = new Date().getTime()
				let beforeDate = date -  6 * 24 * 60 * 60 * 1000
				let formatDate = new Date(beforeDate)
				formatDate.setHours(0)
				formatDate.setMinutes(0)
				formatDate.setSeconds(0)
				return formatDate
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					this.currentUnitId = e.item.id
					this.initStatic()
					if (name && label) {
						this[name] = label
					}
					// uni.showLoading({
					//     mask: true
					// })
					
					// setTimeout(function () {
					//     uni.hideLoading()
					// }, 500)
					
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.van-empty {
		background-color: #fff!important;
		height: 70vh;
	}
	.table-title {
		height: 90rpx;
		background-color: #fff;
		border-top: 10rpx solid #f5f6f7;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		&:before {
			content: "";
			display: inline-block;
			position: relative;
			top: 4rpx;
			left: 0px;
			width: 16rpx;
			height: 16rpx;
			box-sizing: content-box;
			border: 8rpx solid #1152FC;
			border-radius: 50%;
			background-color: #fff;
			margin-right: 6rpx;
		}
	}
	.nav {
		position: absolute;
		top: 435rpx;
		left: 26rpx;
		display: flex;
		z-index: 999;
		.week-btn {
			margin-right: 32rpx;
			width: 140rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			font-size: 28rpx;
			// margin-right: 46rpx;
		}
		.year-btn {
			width: 74rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			font-size: 28rpx;
			margin-right: 46rpx;
		}
		.active {
			background-color: #1152FC;
			color: #fff;
		}
		.type-active {
			background-color: #0366DD;
		}
		.type-btn-line,
		.type-btn-column {
			width: 71rpx;
			height: 48rpx;
		}
		.type-btn-line {
			border: 1rpx solid #279DF5;
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				width: 38rpx;
				height: 38rpx;
			}
		}
		.type-btn-column {
			border: 1rpx solid #0366DD;
			// background-color: #0366DD;
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				width: 50rpx;
				height: 30rpx;
			}
		}
	}
	.top-nav {
		width: 750rpx;
		height: 318rpx;
		position: relative;
		image {
			width: 100%;
			height: 100%;
		}
		.top-title {
			position: absolute;
			top: 28rpx;
			left: 26rpx;
			display: flex;
			align-items: center;
			.circle {
				width: 16rpx;
				height: 16rpx;
				box-sizing: content-box;
				border: 8rpx solid #fff;
				border-radius: 50%;
				background-color: #1152FC;
				margin-right: 8rpx;
			}
			.title-text {
				color: #fff;
				font-size: 32rpx;
				margin-right: 140rpx;
			}
			.label {
				color: #fff;
			}
			.switch-icon {
				margin-left: 20rpx;
				color: #fff;
				width: 6em;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.jt {
				position: relative;
				top: -3rpx;
				width: 20rpx;
				height: 20rpx;
				display: inline-block;
				border-top: 2rpx solid #fff;
				border-right: 2rpx solid #fff;
				transform: rotate(135deg);
			}
		}
		.top-content {
			position: absolute;
			height: 200rpx;
			bottom: 30rpx;
			left: 0;
			right: 0;
			// background-color: pink;
			display: flex;
			//flex: 33.3%;
			flex-wrap: wrap;
			.content-item {
				flex: 33.3%;
				display: flex;
				flex-direction: column;
				align-items: center;
				// padding-left: 74rpx;
				.item-num {
					font-size: 40rpx;
				}
				.item-text {
					font-size: 24rpx;
					color: #fff;
				}
			}
		}
	}
</style>
